import React from 'react'
import { Card, Button, Modal, message } from 'antd'
import Utils from '../../utils/utils'
import ETable from '../../components/ETable/index'
import { axhttp } from '../../utils/axhttp';
import { help, datehelper } from '../../utils/help';
import FormComponent from './components/form';
import BaseForm from '../../components/BaseForm';
import { dictionary } from '../../utils/dictionary';

const url = {
    read: '/api/city/read',
    create: '/api/city/create',
    update: '/api/city/update',
    destroy: '/api/city/destroy',
}
export default class Index extends React.Component {
    user = JSON.parse(localStorage.getItem('login_user_info'));
    /** 状态数据 */
    state = {
        /** 操作类型（新增、修改） */
        operateType: undefined,
        /** 数据的加载状态（是否在加载中） */
        loading: false,
        /** 请求参数 */
        params: {},
        /** 列表数据 */
        data: { list: [], pagination: false }
    }

    /** 查询表单字段 */
    searchFormFields = [
        {
            type: 'input',
            label: '城市名称',
            field: 'cityName',
            width: 80,
        },
        {
            type: 'select',
            label: '状态',
            field: 'state',
            width: 80,
            list: dictionary.commonState,
        }
    ]

    /** 配置列头 */
    columns = [
        {
            title: '城市名称',
            dataIndex: 'cityName',
            ellipsis: true,
            sorter: false,
        }, {
            title: '用车模式',
            dataIndex: 'carMode',
            ellipsis: true,
            sorter: false,
            render(val) {
                return help.getDictionayText('carMode', val);
            }
        }, {
            title: '营运模式',
            dataIndex: 'opMode',
            ellipsis: true,
            sorter: false,
            render(val) {
                return help.getDictionayText('opMode', val);
            }
        }, {
            title: '加盟商',
            dataIndex: 'franchiseeName',
            ellipsis: true,
            sorter: false,
        }, {
            title: '管理员',
            dataIndex: 'administatorName',
            ellipsis: true,
            sorter: false,
        }, {
            title: '状态',
            dataIndex: 'cityStatus',
            ellipsis: true,
            sorter: false,
            render(val) {
                return help.getDictionayText('cityStatus', val);
            }
        }, {
            title: '操作人',
            dataIndex: 'operaterName',
            ellipsis: true,
            sorter: false,
        }, {
            title: '操作时间',
            dataIndex: 'operaterTime',
            ellipsis: true,
            sorter: false,
            render: Utils.formateDate
        }
    ]

    /** 挂载函数 */
    componentDidMount() {
        this.handleRead();
    }

    /** 读取处理函数 */
    handleRead = (params) => {
        this.setState({
            loading: true,   //将loading状态设置为加载中
            params           //将请求参数保存到状态数据中
        });

        axhttp.getListXhr(url.read, params).then(res => {
            this.setState({ data: res });
        }).finally(() => {
            this.setState({
                loading: false, //将loading状态设置为加载完成
            });
        });
    }

    /** 提交 */
    handleSubmit = () => {
        /** 获取操作类型 */
        const { operateType } = this.state;

        /** 根据操作类型，调用不同的方法 */
        switch (operateType) {
            case 'create':
                this.handleCreate();
                break;
            case 'update':
                this.handleUpdate();
                break;
        }
    }

    /** 展示添加弹框 */
    handleCreateVisible = (flag) => {
        this.setState({
            title: '添加城市',          //调整弹框的标题为添加
            isVisible: !!flag,         //控制弹框的为显示状态
            operateType: 'create',     //更改操作类型为添加
        });
    }

    /** 添加处理函数 */
    handleCreate = () => {
        this.formRef.props.form.validateFields((err, data) => {
            if (err) return;

            axhttp.postFormXhr(url.create, {
                ...data,
                operaterId: this.user.id,
                operaterName: this.user.username,
                operaterTime: datehelper.Dateformat(new Date(), 'yyyy-MM-dd HH:mm:ss'),
            }).then(() => {
                /** 关闭添加弹框 */
                this.handleCreateVisible(false);
                message.success('添加成功');
                /** 重新获取数据 */
                this.handleRead();
                /** 清空表单数据 */
                this.formRef.props.form.resetFields();
            });
        });
    }

    /** 展示修改弹框 */
    handleUpdateVisible = (flag) => {
        /** 获取选中的行数据 */
        let item = this.state.selectedItem;

        /** 验证是否选中了数据 */
        if (!item) {
            Modal.info({
                title: '提示信息',
                content: '请选中一条数据'
            });
            return;
        }

        this.setState({
            title: '修改城市',   //调整弹框的标题为修改
            isVisible: !!flag,  //控制弹框的为显示状态
            values: item,       //将选中的数据复制给values，并传递给修改组件
            operateType: 'update',  //更改操作类型为修改
        });
    }

    /** 修改处理函数 */
    handleUpdate = () => {
        /** 获取选中的行数据 */
        let item = this.state.selectedItem;
        /** 获取表单数据 */
        let data = this.formRef.props.form.getFieldsValue();
        axhttp.postFormXhr(url.update, {
            ...item,
            ...data,
            operaterId: this.user.id,
            operaterName: this.user.username,
            operaterTime: datehelper.Dateformat(new Date(), 'yyyy-MM-dd HH:mm:ss'),
        }).then(() => {
            /** 关闭修改弹框 */
            this.handleUpdateVisible(false);
            /** 提示修改成功 */
            message.success('修改成功');
            /** 重新获取数据 */
            this.handleRead();
            /** 清空表单数据 */
            this.formRef.props.form.resetFields();
        });
    }

    /** 删除处理函数 */
    handleDetroy = () => {
        /** 获取选中的行数据 */
        let item = this.state.selectedItem;

        /** 验证是否选中了数据 */
        if (!item) {
            Modal.info({
                title: '提示信息',
                content: '请选中一条数据'
            })
            return;
        }

        /** 提醒是否进行删除操作 */
        Modal.confirm({
            title: '确认操作',
            content: '确定要删除此条数据吗？',
            onOk: () => {
                axhttp.postFormXhr(url.destroy, { id: item.id }).then(() => {
                    /** 提示删除成功 */
                    message.success('删除成功');
                    /** 重新获取数据 */
                    this.handleRead();
                });
            }
        });
    }

    /** 改变状态 */
    handleUpdateState = (state, operate) => {
        /** 获取选中的行数据 */
        let item = this.state.selectedItem;

        /** 验证是否选中了数据 */
        if (!item) {
            Modal.info({
                title: '提示信息',
                content: '请选中一条数据'
            });
            return;
        }

        /** 提醒是否进行删除操作 */
        Modal.confirm({
            title: '确认操作',
            content: '确定要' + operate + '此条数据吗？',
            onOk: () => {
                axhttp.postFormXhr(url.update, {
                    id: item.id,
                    cityStatus: state,
                    operaterId: this.user.id,
                    operaterName: this.user.username,
                    operaterTime: datehelper.Dateformat(new Date(), 'yyyy-MM-dd HH:mm:ss'),
                }).then(() => {
                    /** 提示操作成功 */
                    message.success(operate + '成功');
                    /** 重新获取数据 */
                    this.handleRead();
                });
            }
        });
    }

    render() {
        const { loading, selectedRowKeys, data, title, isVisible, values } = this.state;

        return (
            <div>
                <Card>
                    <BaseForm formList={this.searchFormFields} filterSubmit={this.handleRead} />
                </Card>
                <Card style={{ marginTop: 10 }}>
                    <Button type="primary" icon="sync" onClick={() => this.handleRead()}>刷新</Button>
                    <Button type="primary" icon="plus" onClick={() => this.handleCreateVisible(true)}>添加</Button>
                    <Button type="primary" icon="edit" onClick={() => this.handleUpdateVisible(true)}>修改</Button>
                    <Button type="primary" icon="check-circle" onClick={() => this.handleUpdateState('1', '开通')}>开通</Button>
                    <Button type="primary" icon="stop" onClick={() => this.handleUpdateState('0', '关闭')}>关闭</Button>
                    <Button type="danger" icon="delete" onClick={() => this.handleDetroy()}>删除</Button>
                </Card>
                <div className="content-wrap">
                    <ETable
                        loading={loading}
                        columns={this.columns}
                        rowSelection='radio'
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        selectedRowKeys={selectedRowKeys}
                        data={data}
                        handleRead={this.handleRead}
                    />
                </div>
                <Modal
                    title={title}
                    visible={isVisible}
                    onOk={this.handleSubmit}
                    width={800}
                    onCancel={() => {
                        this.formRef.props.form.resetFields();
                        this.setState({
                            isVisible: false,
                            values: ''
                        })
                    }}
                >
                    {/* wrappedComponentRef 获取组件的引用 */}
                    <FormComponent values={values} wrappedComponentRef={(inst) => this.formRef = inst} />
                </Modal>
            </div>
        );
    }
}